<template>
  <body>
  <header>
    <a href="#">上傳入數紙</a>
    <h1>上傳入數截圖</h1>
  </header>
  <div class="container">
    <div class="form-container">
      <h2>購買流程</h2>
      <p>
        1. 在本店提交訂單後<br>
        2. 請於 24 小時內付款，並截圖傳及上載通知本店<br>
        3. 本店約 1-2 天進行核實款項後，才會安排發貨流程
      </p>

        <label for="order-number">訂單號碼：<span>*</span></label>
        <input type="text" id="order-number" name="order-number" required placeholder="請輸入訂單號碼" v-model="formItem.sn" disabled>

        <label for="upload-image">上傳入數截圖：<span>*</span></label>
<!--        <input type="file" id="upload-image" name="upload-image" required>-->
      <el-image :src="formItem.payImage" v-if="formItem.payImage"></el-image>
        <Upload
          :show-upload-list="false"
          :on-success="handleSuccess"
          :format="['jpg','jpeg','png']"
          :action="action"
          :headers="accessToken"
        >
          <Button class="mt_10">上傳圖片</Button>
        </Upload>

        <button id="submit" @click="submit">提交</button>

    </div>
  </div>
  </body>
</template>

<script>
import i18n from "@/lang";
import {commonUrl} from "@/plugins/request";
import storage from "@/plugins/storage";
import {saveImageOrder} from "@/api/order.js"
export default {
  i18n,
  name: 'UpLoadPage',
  data(){
    return{
      action: commonUrl + '/common/common/upload/file', // 上傳接口
      accessToken: {}, // 驗證token
      formItem:{
        sn: '',
        payImage: ''
      }
    }
  },
  mounted () {
    this.formItem.sn=this.$route.query.sn
    this.accessToken.accessToken = storage.getItem('accessToken');
  },
  methods:{
    handleSuccess (res, file) { // 上傳成功
      this.$set(this.formItem, 'payImage', res.result)
      this.$Message.success('已成功上傳')
    },
    submit(){
      let params = {
        orderSn: this.formItem.sn,
        payImage: this.formItem.payImage
      }
      saveImageOrder(params).then(res=> {
        if (res.success) {
          this.$Message.success('已成功上傳')
          this.$router.push({
            path: '/'
          })
        }
      }).catch(error => {
        this.$Message.error('上傳失敗，請重試');
        console.error('请求失败:', error);
      })
    }
  }
};
</script>

<style scoped lang="scss">
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
  color: #333;
}

a {
  text-decoration: none;
  color: #999;
  font-size: 14px;
}

header {
  text-align: center;
  margin-top: 50px;
}

header h1 {
  font-size: 24px;
  margin-top: 20px;
  color: #333;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
}

.form-container {
  width: 90%;
  max-width: 600px;
  border: 1px solid #ddd;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-container h2 {
  font-size: 20px;
  font-weight: 600;
  color: #855f00;
  margin-bottom: 20px;
}

.form-container p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.form-container p span {
  color: red;
}

.form-container label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  color: #333;
}

.form-container input[type="text"],
.form-container input[type="file"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

#submit {
  margin-top: 10px;
  background-color: #6e6b59;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
}

.form-container button:hover {
  background-color: #5a5949;
}
</style>
